<!DOCTYPE html>
<html lang="en">
<head>
    <title>Admin Panel</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="apple-style">
    <div class="theme-switcher">
        <button id="theme-toggle" class="apple-button">
            <i class="fas fa-moon"></i> 切换主题
        </button>
    </div>
    <header class="blog-header">
        <div class="header-content">
            <h1>管理后台</h1>
            <div class="search-container">
                <form id="search-form" action="{{ url_for('posts.search') }}" method="GET">
                    <div class="search-box">
                        <input type="text" name="q" placeholder="搜索文章..." autocomplete="off">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </div>
                    <div class="search-results"></div>
                </form>
            </div>
            <nav>
                <a href="{{ url_for('admin.new_post') }}" class="apple-button primary">
                    <i class="fas fa-plus"></i> 新建文章
                </a>
                <a href="{{ url_for('posts.index') }}" class="apple-button">
                    <i class="fas fa-home"></i> 返回首页
                </a>
                <a href="{{ url_for('auth.admin_logout') }}" class="apple-button">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </a>
            </nav>
        </div>
    </header>

    <main class="admin-container">
        <div class="animated-background">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>
        <div class="posts-management">
            {% for post in posts %}
            <div class="post-management-card" data-title="{{ post.title }}">
                <div class="post-info">
                    <h3>{{ post.title }}</h3>
                    <time datetime="{{ post.date }}">{{ post.date.strftime('%B %d, %Y') }}</time>
                </div>
                <div class="post-actions">
                    <a href="{{ url_for('posts.edit_post', slug=post.slug) }}" class="apple-button">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <a href="{{ url_for('admin.delete_post_route', slug=post.slug) }}"
                       class="apple-button danger">
                        <i class="fas fa-trash"></i> Delete
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </main>

    <footer class="blog-footer">
        <p>© {{ current_year }} My Tech Blog. All rights reserved.</p>
    </footer>

    <script>
        // 确认删除对话框增强
        document.querySelectorAll('.danger').forEach(btn => {
            btn.addEventListener('click', (e) => {
                if(!confirm('确定要永久删除这篇文章吗？')) {
                    e.preventDefault();
                }
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
    <script>
        // 实时搜索功能
        const fuseOptions = {
            keys: ['title'],
            threshold: 0.4,
            includeScore: true
        };

        const searchInput = document.querySelector('.search-box input');
        searchInput.addEventListener('input', debounce(searchPosts, 300));

        function searchPosts() {
            const query = searchInput.value.trim();
            if(query.length < 2) {
                document.querySelector('.search-results').innerHTML = '';
                return;
            }

            const posts = Array.from(document.querySelectorAll('.post-management-card')).map(card => ({
                title: card.dataset.title,
                element: card
            }));

            const fuse = new Fuse(posts, fuseOptions);
            const results = fuse.search(query);

            // 高亮匹配结果
            results.forEach(result => {
                const card = result.item.element;
                card.style.boxShadow = '0 0 0 2px var(--apple-blue)';
                setTimeout(() => card.style.boxShadow = '', 1000);
            });
        }

        function debounce(func, wait) {
            let timeout;
            return function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, arguments), wait);
            };
        }
    </script>
<script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;

        // 检查本地存储的主题偏好
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark-theme');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i> 切换主题';
        }

        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-theme');
            const isDark = body.classList.contains('dark-theme');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            themeToggle.innerHTML = isDark
                ? '<i class="fas fa-sun"></i> 切换主题'
                : '<i class="fas fa-moon"></i> 切换主题';
        });
    </script>
</body>
</html>